@use "../variables" as *;

.svc-notifier.svc-notifier--shown {
  visibility: visible;
  opacity: var(--ctr-notification-opacity, 0.75);
}

.svc-notifier {
  @include ctrSmallBoldFont;

  position: absolute;
  bottom: calcSize(1);
  left: calcSize(1);
  background: var(--ctr-notification-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  opacity: 0;
  padding: calcSize(1) calcSize(2);
  box-shadow: 0px 2px 6px 0px var(--ctr-shadow-medium-color, var(--sjs-special-glow, #004c441a));
  border-radius: calcSize(0.5);
  color: var(--ctr-notification-text-color, var(--sjs-layer-1-foreground-100, #000000e6));
  min-width: calcSize(30);
  text-align: center;
  z-index: 1600; //todo: should overlap popup

  visibility: hidden;
}

.svc-notifier.svc-notifier--error {
  background-color: var(--ctr-notification-background-color-error, var(--sjs-semantic-red-background-500, #e50a3eff));
  color: var(--ctr-notification-text-color-error, var(--sjs-semantic-red-foreground-100, #ffffffff));
  opacity: var(--ctr-notification-opacity-error, 1);
}

.svc-creator--mobile {
  .svc-notifier {
    left: 0;
    bottom: calcSize(6);
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    z-index: 1000;
  }
}